<template>
  <view v-if="show" class="empty">
    <uv-empty mode="" text="无数据" :marginTop="marginTop" iconSize="50"  :icon="icon"></uv-empty>
  </view>
</template>
<script>
export default {
  name: "Empty",
  props: {
    icon: {
      type: String,
      default: function () {
        return '/static/images/empty-box.png'
      }
    },show: {
      type: Boolean,
      default: function () {
        return true
      }
    }
  },
  data: function () {
    return {
      marginTop: 20,
    };
  },
  mounted(){
    this.computeMarginTop();
  },
  methods: {
    computeMarginTop(){
      let menuButtonObject = {
        height: 0,
        top: 0,
      }
      // #ifndef H5 || APP-PLUS || MP-ALIPAY || MP
      menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
      // #endif
      uni.getSystemInfo({ //获取系统信息
        success: res => {
          //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
          let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) * 2;

          let windowHeight = res.windowHeight;
          if (this.$util.isOs()) {
            windowHeight = (window.innerHeight || document.documentElement.clientHeight)
          }
          this.marginTop =  (windowHeight - navHeight)* 0.33
        },
        fail(err) {
          console.log(err);
        }
      })
    }
  }
};
</script>
<style scoped>
.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
